<template>
   <div v-if="isDesigner">
    网页水印
  </div>
</template>

<script>
import { loadRoute3Path } from '@/utils/loadRemote'
import { AjaxUtil } from 'base/lib'
import { localStore } from '@/utils/sessionStore'
import md5 from 'md5';
export default {
  name: 'bar',
  props: {
    value: null,
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    moduleId: null,
    domId: {
      type: String,
      default: 'app'
    }
  },
  data() {
    return {
    }
  },
  watch: {
    watermarkConfig: {
      immediate: true,
      handler(val) {
        console.log(val,'===watermarkConfig')
        if (val.sdkAddress && !this.isDesigner) {
          this.loadScript(val, this.drawChart)
        }
      }
    },
    watermark: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log(val,'===watermark')
        if (val && val.init) {
          this.drawChart()
        }
      }
    }
  },
  computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    prixPath() {
      return loadRoute3Path('')
    },
    watermarkConfig(){
      const globalConfig = localStore.get('globalConfig') // 读取全局配置
      if (globalConfig && globalConfig.watermarkSdkAddress){
        const {watermarkSdkAddress,watermarkHost, watermarkUsername, watermarkSecret } = globalConfig
        return {
          sdkAddress: watermarkSdkAddress,
          host: watermarkHost,
          username: watermarkUsername,
          secret: watermarkSecret
        }
      }
    },
  },
  methods: {
    async getObjectId() {
      // TODO , ip,mac地址
      const resp = await AjaxUtil.ajax({
        url: `/api/afc/integration/common/addAndBindTraceabilityObject`,
        method: 'POST',
        data: {
          // ip: '',
          // mac: ''
        }
      })
      return resp.data
    },
    async drawChart() {
      const { host, username, secret, } = this.watermarkConfig
      const objectId = await this.getObjectId()
      console.log(this.watermark,'==watermark')
      watermark.init({
        host, 
        objectId, 
        username,
        secret,
        domId: this.domId,
        moduleId: this.moduleId
      })
    },
    loadScript(config) {
      const id = md5(config.sdkAddress).substring(0, 6)
      if(document.getElementById(id)) {
        return
      }
      var head = document.getElementsByTagName('head')[0]
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.id = id
  
      // 当脚本加载完成并执行后触发回调函数
      if (script.readyState) {  // 仅限IE
          script.onreadystatechange = () => {
              if (script.readyState == "loaded" || script.readyState == "complete") {
                  script.onreadystatechange = null;
                  this.drawChart()
              }
          };
      } else {  // 其他浏览器
          script.onload = ()=> {
              this.drawChart()
            // setTimeout(() => {
            //   console.log(this.watermark,'==onload1')
            // }, 1000)
            // setTimeout(() => {
            //   console.log(this.watermark,'==onload2')
            //   // this.drawChart()
            // }, 2000)
          };
      }
  
      // 设置脚本URL开始加载
      // 设置script标签的src属性为要引入的JavaScript文件的URL
      script.src = config.sdkAddress;
      // 将script标签添加到页面的head部分或者其他合适的位置
      head.appendChild(script);
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
